<template>
  <div :class="{'mobile-todo-detail':showMobilePage}" class="todo-detail">
    <Department v-if="type === 2" />
    <Settle v-else-if="type === 18" />
  </div>
</template>

<script>
import Department from './module/department.vue';
import Settle from './module/settle.vue';
import { mapState } from 'vuex';

export default {
  components: { Department, Settle },
  data() {
    return {
      type: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.type = Number(this.$route.query.type);
  }
};
</script>

<style lang="scss" scoped>
.todo-detail {
  margin: 16px;
  background-color: #fff;
  padding: 20px;
  min-height: calc(100vh - 81px);
}
.mobile-todo-detail {
  margin: 0;
  padding: 12px;
}
</style>
